<!DOCTYPE html>

<head>
	<meta charset="utf-8" />
	<title>计算器</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font: bold 14px Arial, sans-serif;
		}

		html {
			height: 100%;
			background: white;
			background: radial-gradient(circle, #fff 20%, #ccc);
			background-size: cover;
		}

		#calculator {
			width: 325px;
			height: auto;
			margin: 100px auto;
			padding: 20px 20px 9px;
			background: #9dd2ea;
			background: linear-gradient(#9dd2ea, #8bceec);
			border-radius: 3px;
			box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
		}

		.top span.clear {
			float: left;
		}

		.top .screen {
			height: 40px;
			width: 212px;
			float: right;
			padding: 0 10px;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
			font-size: 17px;
			line-height: 40px;
			color: white;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
			text-align: right;
			letter-spacing: 1px;
		}

		.keys,
		.top {
			overflow: hidden;
		}

		.keys span,
		.top span.clear {
			float: left;
			position: relative;
			top: 0;
			cursor: pointer;
			width: 66px;
			height: 36px;
			background: white;
			border-radius: 3px;
			box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
			margin: 0 7px 11px 0;
			color: #888;
			line-height: 36px;
			text-align: center;
			user-select: none;
			transition: all 0.2s ease;
		}

		.keys span.operator {
			background: #FFF0F5;
			margin-right: 0;
		}

		.keys span.eval {
			background: #f1ff92;
			box-shadow: 0px 4px #9da853;
			color: #888e5f;
		}

		.top span.clear {
			background: #ff9fa8;
			box-shadow: 0px 4px #ff7c87;
			color: white;
		}

		.keys span:hover {
			background: #9c89f6;
			box-shadow: 0px 4px #6b54d3;
			color: white;
		}

		.keys span.eval:hover {
			background: #abb850;
			box-shadow: 0px 4px #717a33;
			color: #ffffff;
		}

		.top span.clear:hover {
			background: #f68991;
			box-shadow: 0px 4px #d3545d;
			color: white;
		}

		.keys span:active {
			box-shadow: 0px 0px #6b54d3;
			top: 4px;
		}

		.keys span.eval:active {
			box-shadow: 0px 0px #717a33;
			top: 4px;
		}

		.top span.clear:active {
			top: 4px;
			box-shadow: 0px 0px #d3545d;
		}
	</style>
</head>

<body>
	<div id="calculator">
		<div class="top">
			<span class="clear">C</span>
			<!-- 屏幕 -->
			<div class="screen"></div>
		</div>

		<div class="keys">
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span class="operator">+</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span class="operator">-</span>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span class="operator">÷</span>
			<span>0</span>
			<span>.</span>
			<span class="eval">=</span>
			<span class="operator">×</span>
		</div>
	</div>

	<!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
		type="application/javascript"></script> -->
	<script>
		//获取计算器所有的按键
		const keys = document.querySelectorAll('#calculator span')
		//获取屏幕对象
		const input = document.querySelector('.screen')
		//定义数组保存所有的运算符
		const operators = ['+', '-', '×', '÷']
		//状态变量
		let decimalAdded = false
		//循环按键数组
		keys.forEach((key, idx) => {
			//按键绑定点击事件
			key.onclick = function () {
				//获取屏幕中的内容
				let inputVal = input.innerHTML
				//获取当前点击按钮的值
				let btnVal = this.innerHTML
				//获取屏幕中的算式
				let equation = inputVal
				//判断点击了哪个按钮
				if (btnVal == 'C') {
					//点击了清除按钮
					input.innerHTML = ''
					//改变状态变量的值
					decimalAdded = false
				} else if (btnVal == '=') {
					//点击了计算按钮
					//把算式中的乘号替换成*,除号替换成/
					equation = equation.replace(/×/g, '*').replace(/÷/g, '/')
					//获取屏幕中算式的最后一个字符
					let lastChar = equation.charAt(equation.length - 1)
					//???
					//改变状态变量的值
					decimalAdded = false
				} else if (operators.includes(btnVal)) {
					//点击了运算符
					//获取屏幕中算式的最后一个字符
					let lastChar = equation.charAt(equation.length - 1)
					//判断条件,不能开头就是运算符并且不能连续出现两个运算符
					if (inputVal != '' && !operators.includes(lastChar)) {
						input.innerHTML += btnVal
					}
					//单独处理减法,因为可以是负数
					if (inputVal == '' && btnVal == '-') {
						input.innerHTML += btnVal
					}
					//???
					//改变状态变量的值
					decimalAdded = false
				} else if (btnVal == '.') {
					//点击了点按钮
					if (!decimalAdded) {
						//补零操作,如果空屏幕按点,前面补零,如果前面是运算符按点,前面也要补零
						if (input.innerHTML == '' || operators.includes(equation.charAt(equation.length - 1))) {
							input.innerHTML += '0' + btnVal
						} else {
							input.innerHTML += btnVal
						}
						//改变状态
						decimalAdded = true
					}
				} else {
					//点击了数字按钮
					input.innerHTML += btnVal
				}
			}
		})
	</script>
</body>

</html>